import { Menu } from 'antd'

import { Link } from 'react-router-dom'
import routeModuleList from '@/router/mergeRouting'
import {generateRoutes} from "@/router/AuthRouter"
import {observer} from 'mobx-react-lite'
import { useStores } from '@/stores'
const { SubMenu } = Menu


const Menus = () => {
const {userStores} = useStores()

  return (
    <Menu
      theme="dark"
      mode='inline'
      defaultSelectedKeys={['dashboardIndex']}
      defaultOpenKeys={['dashboard']}
      style={{ height: '100%', borderRight: 0 }}
    >
      { userStores.info.jurisdiction && generateRoutes(routeModuleList,userStores.info.jurisdiction).map((item) => {
          return (
            <SubMenu key={item.name} icon={<item.icon />} title={item.name}>
              {
                item.routes && item.routes.map(link => {
                  return (
                    <Menu.Item key={link.name}>
                      <Link to={link.path}>
                        {link.name}
                      </Link>
                    </Menu.Item>
                  )
                })
              }

            </SubMenu>

          )
        })
      }
    </Menu>
  )
}

export default observer(Menus)
